<template>
  <!-- 查询 -->
  <div>
    <form action="/">
      <van-search
        v-model.trim="obj.name"
        show-action
        placeholder="请输入搜索关键词"
        @input="onSearch"
        @cancel="onCancel"
        class="herder"
      />
    </form>
    <p class="toLoad" v-if="!flag">加载中，请稍等...</p>
    <div
      class="house"
      v-for="item in houseList"
      :key="item.community"
      v-else
      @click="gainHouse(item.communityName, item.community)"
    >
      {{ item.communityName }}
    </div>
  </div>
</template>

<script>
import { inquireHouse } from '@/api/city'
import { mapState } from 'vuex'
export default {
  name: 'inquire-page',
  data () {
    return {
      antistop: '',
      obj: {
        name: '',
        id: ''
      },
      flag: true,
      houseList: []
    }
  },
  methods: {
    async onSearch () {
      if (!this.obj.name) this.houseList = []
      if (this.obj.name) {
        this.flag = false
        this.obj.id = this.cityId
        const data = await inquireHouse(this.obj)
        console.log(data)
        this.houseList = data.body
        this.flag = true
      }
    },
    onCancel () {
      this.$router.go(-1)
    },
    gainHouse (houseName, houseId) {
      this.$store.commit('user/setDistrict', houseName)
      this.$store.commit('user/setCommunity', houseId)
      this.$router.go(-1)
    }
  },
  computed: {
    ...mapState('user', ['cityId'])
  },
  async created () {}
}
</script>

<style scoped lang="less">
.header {
  padding-left: 30%;
}
.house {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  color: #666;
  border-bottom: 1px solid #ccc;
}
.toLoad {
  position: absolute;
  top: 45%;
  left: 30%;
}
</style>
